<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>高级标签</title>
    <link rel="stylesheet" type="text/css" href="./js/ext/resources/css/ext-all.css" />    
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="./js/ext/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="./js/ext/ext-all.js"></script>

    <!-- Tabs Example Files -->
<!--     <link rel="stylesheet" type="text/css" href="tabs-example.css" />  -->   
<SCRIPT LANGUAGE="JavaScript">
<!--

	Ext.onReady(function(){
		Ext.QuickTips.init();
		Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

		//json store data		
		var store = new Ext.data.JsonStore({
			url: './s.php',
			root: 'root',
			totalProperty: 'total',
			//idProperty: 'threadid',
			//remoteSort: true,
			fields: [
				'company', 
				'price'
			]	
		});
		store.load({params:{start:0, limit:25}});//{params:{start:0, limit:25}}
		
		//表单
		var form  = new Ext.FormPanel({
			title:"测试表单",
			id: 'form',
			//applyTo:'form',
			frame: true,
			//collapsed: true,
			animCollapse: true,
			collapsible: true,
			closable: true,//作为一个tab时起作用
			//draggable: true,			
			defaultType:'textfield',
			items:[{
				fieldLabel:'用户名',
			},{
				fieldLabel:'密码'
			}],
			buttonAlign: 'left',
			buttons:[{
				text: '保存'
			}]
		}).hide();

		//grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			columns: [
				{id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'},
				{header: "价格", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}				
			],
			stripeRows: true,
			autoExpandColumn: 'company',
			height:350,
			width:600,
			title:'资料列表',
			listeners: {
				'rowdblclick': function(g,index,e){
					var record = g.store.getAt(index).data;

					var ttab = g.ownerCt;
					var tid = 'tab_'+index;
					//判断该组件是已经创建了如果创建则直接激活 否则创建
					if(Ext.ComponentMgr.get(tid)){
						ttab.activate(tid);
					} else {
						ttab.add({
							layout: 'form',
							id: tid,
							title: record.company,
							frame: true,						
							animCollapse: true,
							collapsible: true,
							closable: true,//作为一个tab时起作用							
							defaultType: 'textfield',						
							labelAlign: 'right',					
							buttonAlign: 'left',						
							items:[{
								fieldLabel: '用户名',
								value: record.company
							},{
								fieldLabel: '密码',
								value: record.price
							}],
							buttons:[{
								text: '编辑',
								handler: function(btn){
									Ext.Msg.alert('调试信息','你真的要保存吗');
								}
							},{
								text: '关闭',
								handler: function(btn){									
									var formlayout = btn.ownerCt.ownerCt;
									var ttab = btn.ownerCt.ownerCt.ownerCt;									
									//ttab.getActiveTab().remove();
									//ttab.hideTabStripItem(ttab.getActiveTab()); //previousSibling()
									ttab.remove(ttab.getActiveTab());//删除当前的标签
									ttab.activate(ttab.getActiveTab().previousSibling());//显示当前之前的一个标签
									//setActiveTab
								}
							}]
						}).show();	
					}
				} //end rowdblclick event
			} //end reg listeners
			,bbar: new Ext.PagingToolbar({
				pageSize: 25,
				store: store,
				displayInfo: true,
				displayMsg: 'Displaying topics {0} - {1} of {2}',
				emptyMsg: "No topics to display",
				items:[
					'-', {
					pressed: true,
					enableToggle:true,
					text: 'Show Preview',
					cls: 'x-btn-text-icon details',
					toggleHandler: function(btn, pressed){
						var view = btn.ownerCt.ownerCt.getView();
						view.showPreview = pressed;
						view.refresh();
					}
				}]
			})

		});

		//标签页
		var tabs = new Ext.TabPanel({
			renderTo: 'tabs',
			activeTab: 0,
			closable: true,
			animCollapse: true,
			animScroll:true,
			autoScroll: true,
			closable: true,			
			items:[
				grid
			]
		});			
	});
//-->
</SCRIPT>
</head>

<body>
<div id="form" style="padding:10px"></div>
<div id="tabs" style="padding:10px">
	<div id="grid"></div>
</div>
</body>
</html>